<template>
  <div class="big-show">
    <el-carousel trigger="click" height="30rem" :interval="6000" class="easy-container-x2">
      <el-carousel-item class="item-1 bg-full bg-sign-in">
        <div>
          <h1 class="f-white">知士荟 - 群体化学习平台</h1>
          <h3 class="f-white">我们希望能汇聚优质的学习资源，让有共同兴趣的人能在交流中一起进步</h3>
        </div>
      </el-carousel-item>
      <el-carousel-item class="item-1 bg-full bg-tests">
        <div>
          <h1 class="f-white">知士荟 - 知识分享社区</h1>
          <h3 class="f-white">来这里找到与您相同领域、相同兴趣的人，分享你的资源与经验，在交流中一起进步</h3>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="item-2 flex content-space-around easy-container-x2">
      <el-card class="homepage-card">
        <h3>学习社区</h3>
        <p>将核心资源类似的空间聚集起来形成关联社区</p>
        <el-button size="small" @click="$router.push('/communities')">点击进入</el-button>
      </el-card>
      <el-card class="homepage-card">
        <h3>学习空间</h3>
        <p>围绕一个核心展开的资源共享与问题讨论空间</p>
        <el-button size="small" @click="$router.push('/spaces')">点击进入</el-button>
      </el-card>
<!--      <el-card class="homepage-card">-->
<!--        <h3>学习群组</h3>-->
<!--        <p>学习空间下的组员管理与组员活跃贡献信息的查看</p>-->
<!--        <el-button size="small" @click="$router.push('/groups')">点击进入</el-button>-->
<!--      </el-card>-->
    </div>
  </div>
</template>

<script>
export default {
  name: 'big-show',
};
</script>

<style lang="scss">
.big-show {}
.item-1 {
  text-align: center;
  display: flex;
  align-items: center;

  >div {
    width: 100%;
    padding-bottom: 3rem;
  }
}
.bg-full {
  background-size: 100% 100%; // 背景图片拉伸铺满
}
.bg-sign-in {
  background-image: url('../../assets/images/sign_in/background.jpg'); // 相对于这个文件的路径
}
.bg-images-phones {
  background-image: url('../../assets/images/image-phones.jpg'); // 相对于这个文件的路径
}
.bg-pexels-spaces-001 {
  background-image: url('../../assets/images/pexels-spaces-001.jpg'); // 相对于这个文件的路径
}
.bg-tests {
  background-image: url('../../assets/images/tests.jpg'); // 相对于这个文件的路径
}
</style>
